﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>myPagination Jquery Pagination Plug-in --- LinApex</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/page.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.js" type="text/javascript">
    </script>
<script src="js/jquery.myPagination.js" type="text/javascript">
    </script>
</head>
<body>
<div id="main_container">
  <div id="header">
    <div class="logo"> <img src="images/logo.png" border="0" alt="" title="" /> </div>
  </div>
  <div class="center_content">
    <div class="center_left">
      <div class="title_welcome"> <span class="red"> myPagination </span> Jquery Pagination Plug-in </div>
      <div class="welcome_box">
        <p class="welcome"> <span class="orange"> 说在前面的话 </span> <br />
          看了网络上的大部分分页插件，有一次性读取数据进行分页的，也有通过Ajax进行分页的，也有支持多种样式的，也有直接封装好的，但是尽给我的感觉是不甚完美，于是花了4天时间写了这个分页的插件... </p>
        <a href="http://blog.csdn.net/feng6850180/archive/2011/06/25/6567931.aspx" class="read_more">查看分页</a> </div>
      <div class="features">
        <div class="title"> 功能介绍 </div>
        <ul class="list">
          <li> <span> 1 </span> <a href="#">支持 初始化页数 </a> </li>
          <li> <span> 2 </span> <a href="#">支持 总页数 初始化，自动从服务器获取总页数进行计算</a> </li>
          <li> <span> 3 </span> <a href="#">支持 自定义页码数量</a> </li>
          <li> <span> 4 </span> <a href="#">自带 24 种 开源Css样式</a> </li>
          <li> <span> 5 </span> <a href="#">支持 定义分页CSS样式</a> </li>
          <li> <span> 6 </span> <a href="#">支持Ajax读取数据，支持自定义返回类型数据 Html Json Xml</a> </li>
          <li> <span> 7 </span> <a href="#">支持 内容动态加载</a> </li>
          <li> <span> 8 </span> <a href="#">支持 自定义 回调函数名称</a> </li>
          <li> <span> 9 </span> <a href="#">支持 自定义 参数，按条件搜索数据</a> </li>
          <li> <span> 10 </span> <a href="#">支持 输入参数 跳转页面</a> </li>
          <li> <span> 11 </span> <a href="#">支持 自定义 文本框 样式</a> </li>
        </ul>
      </div>
      <script>
            $(function() {
              $("#demo1").myPagination({
                currPage: 1,
                pageCount: 100,
                pageSize: 5
              });

              $("#demo2").myPagination({
                currPage: 1,
                pageCount: 100,
                pageSize: 5,
                cssStyle: 'meneame'
              });

              $("#demo3").myPagination({
                currPage: 10,
                pageCount: 100,
                pageSize: 8,
                cssStyle: 'flickr'
              });

              $("#demo4").myPagination({
                currPage: 10,
                pageCount: 100,
                pageSize: 8,
                cssStyle: 'sabrosus',
                info: {
                  first: 'first',
                  first_on: true,
                  last: 'last',
                  last_on: true,
                  prev: 'prev',
                  prev_on: true,
                  next: 'next',
                  next_on: true,
                  //msg_on:false,		//为false 可以关闭 跳转栏
                  link: 'javascript:void(0);',
                  msg: "<span>&nbsp;&nbsp;&nbsp;我跳到{curr}/{sum}页</span>"
                }
              });

              $("#demo5").myPagination({
                currPage: 10,
                pageCount: 100,
                pageSize: 8,
                cssStyle: 'scott',
                info: {
                  text: {
                    background: '#000',
                    color: '#fff',
                    width: '30px',
                    height: '30px',
                    padding: '0px 0px 0px 3px'
                  }
                }
              });

/*
// 已注释
              $("#demo6").myPagination({
                currPage: 10,
                pageCount: 100,
                pageSize: 5,
				cssStyle:'yellow',
                ajax: {
                  on: true,
				  callback:'demo6CallBack',
                  url: "findPage.php",
                  dataType: 'html'
                }
              });

// 已注释
              $("#demo7").myPagination({
                currPage: 10,
                pageCount: 100,
                pageSize: 5,
				cssStyle:'grayr',
                ajax: {
                  on: true,
				  callback:'demo7CallBack',
                  url: "jsonTest.php",
                  dataType: 'json'
                }
              });

			// 已注释
              $("#demo8").myPagination({
                currPage: 10,
                pageCount: 100,
                pageSize: 5,
				cssStyle:'black-red',
                ajax: {
                  on: true,
				  callback:'demo8CallBack',
                  url: "xmlTest.php",
                  dataType: 'xml'
                }
              });
			  

              // 已注释
              $("#demo9").ajaxStart(function() {
                //这里是需要显示的内容
                $("#demo9Content span").addClass("load").html('正在加载数据...请稍后');
              }).myPagination({
                currPage: 10,
                pageCount: 100,
                pageSize: 5,
                ajax: {
                  on: true,
                  callback: 'demo9CallBack',
                  url: "xmlTest.php",
                  dataType: 'xml'
                }
              });
*/

            })

            //Demo6 中自定义 回调函数

            function demo6CallBack(data) {
              alert(data);
            }

            //Demo7 中自定义 回调函数

            function demo7CallBack(data) {
              var result = data.result;
              alert(result);
            }

            //Demo8 中自定义 回调函数

            function demo8CallBack(data) {
              var result = $(data).find("data").text();
              alert(result);
            }

            //Demo9 中自定义 回调函数

            function demo9CallBack(data) {				
              var result = $(data).find("data").text();
			  $("#demo9Content").html(result);
            }
          </script>
      <div class="features"></div>
    </div>
    <div class="center_right">
      <div class="testimonials">
        <div class="title"> 开发者介绍 </div>
        <div class="text_box">
          <p> <strong> LinApex 联系QQ：229660767 <br />
            Blog： <a href="http://blog.csdn.net/feng6850180">LinApex的博客</a> <br />
            本人承接各类大中小型 Web 设计与开发 (Java) <br />
            前台，后台，数据库，手机(Android)，游戏 都可 <br />
            </strong> </p>
        </div>
      </div>
      <div class="testimonials">
        <div class="title"> 操作小提示 </div>
        <div class="text_box">
          <p> <strong> LinApex 联系QQ：229660767 <br />
            Blog： <a href="http://blog.csdn.net/feng6850180">LinApex的博客</a> <br />
            1.在文本框中输入参数，并按回车，即可跳转到该页面 <br />
            2.在配置当前页面时，如是Ajax获取数据，pageCount 可配置为 100 <br />
            </strong> </p>
        </div>
        <div class="text_box">
          <p> <strong> 3.在配置 msg 参数时，内容需放在一个 Html 标签内 <br />
            4.自定义样式时 按照官方的样式格式来进行编写 <br />
            5.Ajax 动态加载数据时，必须指定 callback 回调函数 <br />
            </strong> </p>
        </div>
      </div>
    </div>
    <div class="clear"></div>
  </div>
  <div id="footer">
    <div class="news_box">
      <div class="title" style="color:#fff;"> Demo1(一个基础的配置) </div>
      <div class="news_content" id="demo1" style="width:800px;"></div>
    </div>
    <div class="news_box">
      <div class="title" style="color:#fff;"> Demo2(更改样式) </div>
      <div class="news_content" id="demo2" style="width:800px;"></div>
    </div>
    <div class="news_box">
      <div class="title" style="color:#fff;"> Demo3(初始化页面及更改页码大小) </div>
      <div class="news_content" id="demo3" style="width:800px;"></div>
    </div>
  </div>
  <div class="news_box">
    <div class="title" style="color:#fff;"> Demo4(配置页码栏) </div>
    <div class="news_content" id="demo4" style="width:800px;"></div>
  </div>
  <div class="news_box">
    <div class="title" style="color:#fff;"> Demo5(配置文本框样式) </div>
    <div class="news_content" id="demo5" style="width:800px;"></div>
  </div>
  <div class="news_box">
    <div class="title" style="color:#fff;"> Demo6(动态效果-有返回参数与Ajax访问)---返回Html或Text数据，必须在服务端生成一个隐藏域单) </div>
    <div class="news_content" id="demo6" style="width:800px;"> <span style="font-size:18px; color:#fff;"> 已注释，如需动态效果，则去除注释即可 </span> </div>
  </div>
  <div class="news_box">
    <div class="title" style="color:#fff;"> Demo7(动态效果-有返回参数与Ajax访问)---返回Json数据 </div>
    <div class="news_content" id="demo7" style="width:800px;"> <span style="font-size:18px; color:#fff;"> 已注释，如需动态效果，则去除注释即可 </span> </div>
  </div>
  <div class="news_box">
    <div class="title" style="color:#fff;"> Demo8(动态效果-有返回参数与Ajax访问)---返回Xml数据 </div>
    <div class="news_content" id="demo8" style="width:800px;"> <span style="font-size:18px; color:#fff;"> 已注释，如需动态效果，则去除注释即可 </span> </div>
  </div>
  <div class="news_box">
    <div class="title" style="color:#fff;"> Demo9(动态效果-有返回参数与Ajax访问)---动态数据加载(加载时，显示动态效果) </div>
    <div class="news_content" id="demo9" style="width:800px;"> <span style="font-size:18px; color:#fff;"> 已注释，如需动态效果，则去除注释即可 </span> </div>
    <div class="news_content" id="demo9Content" style="width:800px; font-size:18px; color:#F00;"> <span style="font-size:18px; color:#fff;"> 动态内容区，进行Ajax 访问时，才显示 </span> </div>
  </div>
</div>
</div>
</div>
<!-- end of main_container -->
</body>
</html>